<%@page import="com.zretc.news.entity.NewsType"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>类型管理</title>

<!-- 分页有关 1 引入layui.css文件 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">

<!--1. Bootstrap core CSS -->
<link href="${pageContext.request.contextPath}/dist/css/bootstrap.min.css" rel="stylesheet">
<!--2. Custom styles for this template -->
<!-- ${pageContext.request.contextPath}/ 得到上下文的路径值 -->
<link href="${pageContext.request.contextPath}/css/dashboard.css" rel="stylesheet">


</head>
<body>

	<jsp:include page="nav.html"></jsp:include>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li><a href="NewsTypeServlet">新闻类型</a></li>
					<li><a href="addtype.jsp">新增类型<span class="sr-only">(current)</span></a></a></li>
					<li><a href="addusers.jsp">新增用户</a></li>
					<li class="active"><a href="NewsTypeServlet?op=queryByPage">新闻类型表(分页)
					</a></li>
					<li><a href="addnews.jsp">新增新闻</a></li>
				</ul>

			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<h2 class="sub-header">
					新闻类型列表[分页]

					<form class="navbar-form navbar-right" action="NewsTypeServlet"
						method="post">
						<input type="text" class="form-control" name="keywords"
							id="keywords" value="${keywords}" placeholder="关键字"> <input
							type="hidden" name="op" value="queryByPage"> <input
							type="submit" class="btn btn-primary" value="查询">

					</form>

				</h2>
				<div class="table-responsive" style="height: 430px">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>编号</th>
								<th>类型名称</th>
								<th>备注</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<!-- 如果属性范围内的pd为null，我们就跳转到NewsTypeServlet去获取数据，然后再转发回来 -->
							<c:if test="${pd==null}">
								<!-- c:redirect 跳转到 NewsTypeServlet -->
								<c:redirect url="NewsTypeServlet?op=queryByPage"></c:redirect>
							</c:if>
							<!-- 如果 范围内的list不为空，遍历数据并展示结果 -->
							<c:if test="${pd!=null}">
								<c:forEach items="${pd.data}" var="newstype">
									<tr>
										<td>${newstype.typeid}</td>
										<td>${newstype.typename}</td>
										<td>${newstype.typeremark}</td>
										<td><a href="#" class="updateType">修改</a> | <a class="delType" href="#">删除</a></td>

									</tr>
								</c:forEach>
							</c:if>
						</tbody>
					</table>
				</div>
				<!-- 显示 分页导航区域 -->
				<div id="pagediv" style="text-align: center"></div>

			</div>
		</div>
	</div>

	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!--3 - js/jquery-2.0.3.js -->
	<script src="${pageContext.request.contextPath}/js/jquery-2.0.3.js"></script>
	<!--4 - ootstrap.min.js -->
	<script src="dist/js/bootstrap.min.js"></script>

	<!--分页操作 2- 引入layui.js文件 -->
	<script src="layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
//完整功能
  laypage.render({
    elem: 'pagediv' // 分页的导航在哪里显示，pagediv是层id
    ,theme: '#428bca'  //颜色
    ,count: ${pd.totalCount} //总记录数
    ,curr: ${pd.page}  //当前页
    ,limit: ${pd.pageSize}//当前页显示的记录数
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    ,jump: function(obj, first){ //跳转页面时候的动作
	    //obj包含了当前分页的所有参数，比如：
	    // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
	   // console.log(obj.limit); //得到每页显示的条数
	    
	    //首次不执行
	    if(!first){
	      //do something
	       location.href="NewsTypeServlet?op=queryByPage&page="+obj.curr+"&pageSize="+obj.limit+"&keywords="+$("#keywords").val();
	    }
	  }
  });

  
  //给删除超链接设置了类class,作用希望我们可以定位a标签，同时完成其单击事件
  $(".delType").click(function(){
	  //单击事件的代码	  
	  //0得到这行 的第一个td中的typeid的值,我们使用js(jq)的一些方法来操作页面元素
	  //$(this).parents("tr") 当前行
	  //find("td") 这个tr下的所有td
	  //eq(0) 所有td中的第一个
	  //text() ->innerText td中的文本内容
	  var typeid = $(this).parents("tr").find("td").eq(0).text();
	  //1 提 示用户是否删除?打算使用layui的layer组件弹窗提示
	//询问框

	  layer.confirm('是否确定删除编号为'+typeid+"的类型", {
	    btn: ['朕确定','朕取消'] //按钮
	  }, function(){
	    //layer.msg('确定的时候要执行的代码', {icon: 1});
	    //真的删除
	    //1 url传值，页面条状  2 ajax请求
	    $.ajax({
	    	//参数
	    	url: "NewsTypeServlet",
	    	type: "post",
	    	data:{
	    		typeid: typeid,
	    		op: "del"
	    	},
	    	success: function(res){
	    		//判断返回值的结果，根据结果做提示以及后续的页面刷新操作
	    		if(res.msg == "true")
	    			{
	    			
	    			layer.msg('删除成功!', {
	    				icon: 1,
	    			    time: 2000, //2s后自动关闭
	    			    btn: ['确定']
	    			  },function(){
	    				  
	    				  //页面刷新
	    				  location.href="NewsTypeServlet?op=queryByPage&page="+${pd.page}+"&pageSize="+${pd.pageSize}+"&keywords="+$("#keywords").val();	    				  
	    			  });	    					    			
	    			}
	    		else{
	    			
	    			layer.msg('删除失败!', {
	    				icon: 1,
	    			    time: 2000, //2s后自动关闭
	    			    btn: ['确定']
	    			  });
	    			
	    		}
	    		
	    	},
	    	dataType: "json"
	    	
	    	
	    	
	    });
	  });		  
			  
			  
	  
	  
  });
  /**********删除结束********/

  
  /***********修改开始******/
  
  $(".updateType").click(function(){
	  
	  //得到类型的typeid
	  var typeid=$(this).parents("tr").find("td").eq(0).text();
	  var typename=$(this).parents("tr").find("td").eq(1).text();
	  var typeremark=$(this).parents("tr").find("td").eq(2).text();
	  
	  $("#typeid").val(typeid);
	  $("#typename").val(typename);
	  $("#typeremark").val(typeremark);
	  
	
	//弹出层
	  layer.open({
		  type: 1,
		  area: ['600px', '400px'],
		  content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		});
	  
	  
   });
  
  
  
  
  
  });
  
  
  /*********修改结束*******/

  
</script>

<div id="updatediv" style="display:none;width:500px">
  <br>
   <form class="layui-form" action="">
   
  <div class="layui-form-item">
    <label class="layui-form-label">类型编号</label>
    <div class="layui-input-block">
      <input type="text" name="typeid" id="typeid" required  lay-verify="required" readonly  class="layui-input">
    </div>
  </div>
 
 <div class="layui-form-item">
    <label class="layui-form-label">类型名称</label>
    <div class="layui-input-block">
      <input type="text" name="typename" id="typename" required  lay-verify="required"   class="layui-input">
    </div>
  </div>
 
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">类型的说明</label>
    <div class="layui-input-block">
      <textarea name="typeremark" id="typeremark"  class="layui-textarea"></textarea>
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
 
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    
	  //可以1 表单提交  2 可以用ajax
	  //得到了表单 中的数据,传递给servlet完成数据访问即可
	  //未完， 待  "大家" 续
	  
	  layer.msg(JSON.stringify(data.field));
    
    //return false是不做表单提交
    return false;
  });
});
</script>
  
</div>

</body>
</html>
